<template>
    <div>
        <div class="w_bg bd" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="pd_20">
                <div class="serch_box">
                    <el-input placeholder="请输入人员名称进行搜索" v-model="search" clearable class="input-with-select">
                        <el-button slot="append" @click="filteredData(search,tableData)">
                            <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.5259 13.8475L18.5054 16.8263C18.8311 17.1518 18.8311 17.6798 18.5055 18.0054C18.1799 18.331 17.652 18.331 17.3264 18.0053L14.3476 15.0258C13.0199 16.0901 11.3684 16.669 9.66675 16.6666C5.52675 16.6666 2.16675 13.3066 2.16675 9.16663C2.16675 5.02663 5.52675 1.66663 9.66675 1.66663C13.8067 1.66663 17.1667 5.02663 17.1667 9.16663C17.1692 10.8683 16.5903 12.5197 15.5259 13.8475ZM13.8542 13.2291C14.9118 12.1415 15.5025 10.6837 15.5001 9.16663C15.5001 5.94329 12.8892 3.33329 9.66675 3.33329C6.44341 3.33329 3.83341 5.94329 3.83341 9.16663C3.83341 12.3891 6.44341 15 9.66675 15C11.1838 15.0023 12.6417 14.4117 13.7292 13.3541L13.8542 13.2291Z" fill="white" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4999 9.16668C15.4999 5.94334 12.8891 3.33334 9.66655 3.33334C6.44322 3.33334 3.83322 5.94334 3.83322 9.16668C3.83322 12.3892 6.44322 15 9.66655 15C11.1836 15.0024 12.6415 14.4118 13.7291 13.3542L13.8541 13.2292C14.9116 12.1416 15.5023 10.6837 15.4999 9.16668ZM15.7924 13.8313L18.6466 16.6849C19.0504 17.0886 19.0504 17.7431 18.6467 18.1468C18.243 18.5506 17.5884 18.5505 17.1848 18.1468L14.3312 15.2925C12.9929 16.3148 11.3536 16.8691 9.66627 16.8667C5.41594 16.8665 1.96655 13.417 1.96655 9.16668C1.96655 4.91622 5.4161 1.46667 9.66655 1.46667C13.9169 1.46667 17.3664 4.91606 17.3666 9.16639M15.7924 13.8313C16.8146 12.4931 17.3689 10.8537 17.3666 9.16639Z" fill="white" />
                            </svg>
                        </el-button>
                    </el-input>
                </div>
                <div class="flexbox flexcenter flexbetween">
                    <el-date-picker style="width:260px" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryInfo.need_date" type="daterange" :clearable="false" size="small" @change="getDataList()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button plain size="small" class="plain_blue" @click="downloadFile">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出数据
                        </div>
                    </el-button>
                </div>
            </div>
            <div class="table_box">
                <el-table :data="filteredData(search,tableData)" class="com_table" ref="straRef">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="create_date" label="排名" width="80" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.rank==1">
                                <img src="../../assets/img/number_01.svg" alt="" class="rank_img">
                            </template>
                            <template v-else-if="scope.row.rank==2">
                                <img src="../../assets/img/number_02.svg" alt="" class="rank_img">
                            </template>
                            <template v-else-if="scope.row.rank==3">
                                <img src="../../assets/img/number_03.svg" alt="" class="rank_img">
                            </template>
                            <template v-else>
                                {{scope.row.rank}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="人员姓名" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <span class="name_head">{{scope.row.nickname | keepOneNumS}}</span>
                                {{scope.row.nickname}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_video" label="短视频消耗" width="140">
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost_video?scope.row.stat_cost_video:'0'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_live" label="直播消耗" width="140">
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost_live?scope.row.stat_cost_live:'0'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="总消耗" width="140">
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost?scope.row.stat_cost:'0'}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div> -->
        </div>

    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            search:'',
            loading: false,
            queryInfo: {
                need_date: [],
                order: "desc",
            },
            total: 1,
            setpage: 1,
            tableData: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                    let dateTime = new Date();
                    let nowTime =
                        dateTime.getHours() * 60 + dateTime.getMinutes();
                    if (nowTime > 740) {
                        return time.getTime() > Date.now() - 8.64e7;
                    } else {
                        return time.getTime() > Date.now() - 8.64e7 - 8.64e7;
                    }
                },
            },
        };
    },
    created() {
        this.getTimeFn();
        this.getDataList();
    },
    methods: {
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            that.queryInfo.need_date[0] = that.formatDate(start);
            that.queryInfo.need_date[1] = that.formatDate(end);
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },


        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.nickname.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/dataList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        downloadFile() {
            var excelDatas = [
                {
                    tHeader: [
                        "人员姓名",
                        "短视频消耗",
                        "直播消耗",
                        "总消耗",
                    ],
                    filterVal: [
                        "nickname",
                        "stat_cost_video",
                        "stat_cost_live",
                        "stat_cost",
                    ],
                    tableDatas: this.tableData,
                    sheetName: "投放消耗",
                },
            ];
            downLoad(excelDatas,'投放消耗')
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.table_box {
    padding-top: 0;
    padding-bottom: 20px;
}
.btn_list {
    text-align: center;
}
.ctn_btn {
    font-size: 14px;
    color: #17233d;
    padding: 0 24px;
    line-height: 28px;
    border-radius: 30px;
    cursor: pointer;
}
.ctn_btn.active {
    color: #fff;
    background: #4475ff;
}
.serch_box {
    width: 430px;
    margin: 20px auto 34px;
}
.cost_font {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #17233d;
}
.name_head {
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: #4475ff;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.rank_img {
    display: block;
    margin: 0 auto;
}
</style>
<style>
.serch_box .el-input__inner {
    border: 2px solid #4475ff;
}
.serch_box .el-input-group__append,
.serch_box .el-input-group__prepend {
    background-color: #4475ff;
    border: 1px solid #4475ff;
}
.serch_box .el-button {
    padding: 10px 15px;
}
</style>


